<template>
  <div>
    <el-cascader clearable filterable placeholder="试试搜索: 手机" v-model="paths" :options="categorys" :props="settings" @change="handleChange">
    </el-cascader>
  </div>
</template>

<script>
export default {
  props: {
    catelogPath: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      categorys: [],
      paths: this.catelogPath,
      settings: {
        value: "catId",
        label: "name",
        children: "children"
      }
    };
  },
  watch: {
    catelogPath(v) {
      console.log("监听到了catelogPath的变化, 新值为: ", v);
      this.paths = this.catelogPath
    }

  },
  methods: {
    getCategorys() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        this.categorys = data.data;
      });
    },
    handleChange(value) {
      console.log("选择的数据为: ", value);
      this.$emit("update:catelogPath", value);
    }
  },
  mounted() {
    this.getCategorys();
  }
}
</script>

<style>
</style>